<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Title</title>
		<style type="text/css">
			.model {
				width: 500px;
				height: 500px;
				box-shadow: 0 0 10px rgba(0, 0, 0, .4);
				border-radius: 8px;
				padding: 1em;
				padding-top: 0;
				position: fixed;
				z-index: 100;
				background-color: #fff;
				display: none;
			}

			.model-header {
				border-bottom: 1px solid #eaeaea;
				height: 35px;
				line-height: 35px;
				text-align: center;
			}

			.close {
				position: absolute;
				top: 0;
				right: 15px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				display: block;
				color: #666;
				cursor: pointer;
			}

			.close:hover {
				color: #A30D10;
			}

			.mask {
				background-color: #000;
				width: 100%;
				height: 100%;
				opacity: .3;
				filter: alpha(opacity=30);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
				display: none;
			}
		</style>
	</head>
	<body>
		<div><a href="javascript:;" class="open">登陆</a></div>
		<div class="model">
			<div class="model-header">
				<h3>弹出标题</h3>
				<span class="close">×</span>
			</div>
			<div class="model-body">弹出内容 </div>
			<div class="model-footer"></div>
		</div>
		<div class="mask"></div>
		<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".open").click(function() {
					showModel();
				});

				function showModel() {
					var wW = $(window).width(); //浏览器可视区域宽度和高度
					var wH = $(window).height();
					var oW = $(".model").innerWidth(); //获取类叫model的宽度和高度
					var oH = $(".model").innerHeight();
					$(".model").show().css({
						"top": (wH - oH) / 2 + "px",
						"left": (wW - oW) / 2 + "px"
					});
					$(".mask").fadeIn();
				}
				$(window).resize(function() {
					if ($(".model").is(":visible")) { //弹出框必须可见后 才能调用showModel()
						showModel();
					}
				});
				$(".close").click(function() {
					$(".model").hide();
					$(".mask").fadeOut();
				});
				$(document).keydown(function(ev) {
					if (ev.keyCode == 27) { //当按下键盘Esc时===》close关闭按钮
						//				$(".model").hide();
						//				$(".mask").fadeOut();
						$(".close").trigger("click"); //trigger("事件名")  模拟事件
					}
				})
			});
		</script>
	</body>
</html>
